<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <!-- 9560 4955 -->
  <div
    class="map-wrapper"
    @wheel="mouseWheel"
    @mousedown="mousedown"
    @mouseup="mouseup"
    @mousemove="mousemove"
    ref="mapSVG"
    @click="handleMapClick"
    :draggable="false"
  >
    <svg
      ref="mapContainer"
      class="svgMap"
      viewBox="0 0 9560  4955"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      :style="`transform:scale(${data.scale}) translate(${data.x}px,${data.y}px);cursor:${data.cursor};`"
    >
      <image :xlink:href="
            require('../../../assets/png/map.png')
          " />
      <!-- 摄像头 -->
      <image
        v-for="(item,index) in options"
        :width="66*3"
        :height="40*3"
        :key="index"
        :x="item.x"
        :y="item.y"
        :state="item.state"
        @click="handleChangeCamera(item.id)"
        :style="`cursor:pointer;transform: rotate(${item.rotate}deg);transform-origin: center;transform-box: fill-box;`"
        :xlink:href="
            require(`../../../assets/png/icon-camera-${item.state === '1'?'default':'danger'}.png`)
          "
      />
    </svg>
    <div class="tool-container">
      <div class="tool-group">
        <div class="tool-item subtract" @click="handleScale(-0.1)">
          <img class="icon" src="../../../assets/png/subtract.png" alt srcset />
        </div>
        <div class="line-split"></div>
        <div class="tool-item add" @click="handleScale(0.1)">
          <img class="icon" src="../../../assets/png/add.png" alt srcset />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, watch, defineProps, computed, defineEmits } from "vue";

const props = defineProps(["cameraState"]);
const emits = defineEmits(["handleChangeCamera"]);
watch(
  () => props.cameraState,
  curr => {
    console.log(curr);
  }
);
const _options = [
  { id: "C1", x: 3840, y: 700, rotate: 219 },
  { id: "C3", x: 6270, y: 700, rotate: 233 },
  { id: "C5", x: 6650, y: 700, rotate: 299 },

  { id: "C8", x: 6108, y: 2820, rotate: 228 },
  { id: "C9", x: 6338, y: 2820, rotate: 121 },

  { id: "C18", x: 4440, y: 2390, rotate: 130 },
  { id: "C26", x: 4240, y: 460, rotate: 233 },
  { id: "C27", x: 4440, y: 2200, rotate: 233 },
  { id: "C28", x: 3150, y: 3700, rotate: 270 },

  { id: "C29", x: 4950, y: 4000, rotate: 270 },
  { id: "C30", x: 6108, y: 2320, rotate: 180 },
  { id: "C31", x: 6338, y: 2320, rotate: 235 }
];
const options = computed(() => {
  const _arr = (props.cameraState || []).filter(
    e =>
      e.id === "C1" ||
      e.id === "C3" ||
      e.id === "C5" ||
        e.id === "C8" ||
      e.id === "C9" ||
      e.id === "C18" ||
      e.id === "C26" ||
      e.id === "C27" ||
      e.id === "C28" || 
      e.id === "C29" ||
      e.id === "C30" ||
      e.id === "C31" 
  );
  const arr = _options.map(e => {
    const index = _arr.findIndex(el => el.id === e.id);
    if (index > -1) {
      e.state = _arr[index].state;
    }

    return e;
  });
  return arr;
});
const mapContainer = ref(null);
const mapSVG = ref(null);
const data = reactive({
  scale: 1,
  x: 0,
  y: 0,
  cursor: "default",
  fullScreen: false,
  lastClientX: 0,
  lastClientY: 0
});

const handleScale = param => {
  data.scale += param;
};
const handleFullScreen = () => {
  data.fullScreen = !data.fullScreen;
  if (data.fullScreen) {
    mapSVG.value.requestFullscreen();
  } else {
    document.exitFullscreen();
  }
};
const mouseWheel = e => {
  e.stopPropagation();
};
const mousedown = e => {
  if (e.target.className !== "mapSVG") {
    data.lastClientX = e.clientX;
    data.lastClientY = e.clientY;
    data.cursor = "move";
    console.log("mousedown");
  }
};
const mouseup = e => {
  data.lastClientX = null;
  data.lastClientY = null;
  data.cursor = "default";
};
const mousemove = e => {
  if (data.lastClientX && data.lastClientY) {
    const { clientX, clientY } = e;

    data.x = data.x + (clientX - data.lastClientX) / data.scale;
    data.y = data.y + (clientY - data.lastClientY) / data.scale;
    console.log(data.x, data.y);
    data.lastClientX = e.clientX;
    data.lastClientY = e.clientY;
  }
};
const handleChangeCamera = cameraId => {
  emits("handleChangeCamera", cameraId);
};
const handleMapClick = e => {
  //   console.log(e.target.getAttribute("class"));
};
</script>

<style lang="less">
.map-wrapper {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  overflow: hidden;
  background: #ecf3f7;
  .svgMap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
  }
  .tool-container {
    position: absolute;
    bottom: 8px;
    right: 8px;
    .tool-group {
      margin-bottom: 16px;
      width: 40px;
      height: 80px;
      background: #ffffff;
      box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
      border-radius: 8px;
      overflow: hidden;
      .line-split {
        width: 40px;
        height: 1px;
        background: #e8e8e8;
      }
      .tool-item {
        cursor: pointer;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s linear;
        .icon {
          width: 18px;
          height: 18px;
        }
        &:hover {
          background: #edecec7a;
        }
        &:active {
          background: #dddcdc7a;
        }
      }
    }
    .expend {
      cursor: pointer;
      width: 40px;
      height: 40px;
      background: #ffffff;
      box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s linear;
      &:hover {
        background: #edecec7a;
      }
      &:active {
        background: #dddcdc7a;
      }
      .icon {
        width: 18px;
        height: 18px;
      }
    }
  }
}
</style>